<template>
    <div class="login">
        <h1>后台管理登录页面</h1>
        <div class="loginBox">
<!--        logo区-->
        <div class="loginLogo">
            <img src="../assets/img/log.png" alt="">
        </div>
<!--        登录表单区-->
        <el-form class="login_form" ref="loginFormRef" :rules="rules" :model="LoginForm" label-width="80px">
            <el-form-item prop="name">
                <el-input v-model="LoginForm.name" prefix-icon="el-icon-s-custom" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" prefix-icon="el-icon-lock" v-model="LoginForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
<!--            登录按钮-->
            <el-form-item class="btns">
               <el-button type="primary" @click="login">登录</el-button>
               <el-button type="info" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    </div>
</template>

<script>

    export default {
        name: 'login',
        data() {
            return {
                LoginForm: {
                    name: '',
                    password: ''
                },
                rules:{
                    name: [
                        {required: true,message:'请输入登录名称',trigger:"blur"},
                        {min:3 ,max: 10,message: "长度必须在3-10个字符",trigger: "blur"}
                        ],
                    password: [
                        {required: true,message: '请输入登录密码',trigger: "blur"}
                    ]
                }
            }
        },
        methods: {
            login(){
                let _this = this
                this.$refs.loginFormRef.validate(valid => {
                    // 如果矫正失败返回
                    if(!valid){
                        return
                    }
                    this.$http.post("/login",this.LoginForm).then((res=>{
                        console.log(res.data)
                        if (res.data.code == "200"){
                            _this.$message({
                                showClose:true,
                                message:"登录成功",
                                type:"success"
                            })
                            var userData = JSON.stringify(res.data.data[0]);
                            window.sessionStorage.setItem("userData",userData)
                            var a1 = res.data.route;
                            console.log('a1==='+a1);
                            _this.$store.commit('rolerRouter',a1)
                            // console.log(_this.$store.state.routerList)将路由信息添加到vuex
                            _this.$router.push('/home')

                        }else{
                            _this.$message({
                                showClose:true,
                                message:"请检查您的用户名和密码是否正确！！！",
                                type: "error"
                            });
                            _this.LoginForm.name=""
                            _this.LoginForm.password=""
                        }
                    }))

                })
            },
            //重置登录按钮
            reset() {
                this.$refs.loginFormRef.resetFields();
            }
        }
    }
</script>

<style scoped>
    html,body{
        width: 100%;
        height: 100%;

    }
    .login {
        width: 100%;
        height: 100%;
        background: url("../assets/img/10.jpg") center center no-repeat;
        background-size: 100% 100%;
        position: relative;
        overflow: hidden;
    }
    .login h1 {
        text-align: center;
        color: white;
        font-size: 42px;
        margin-top: 45px;
        letter-spacing: 0.2em;
    }
    .loginBox{
        width: 500px;
        height: 300px;
        border-radius: 10px;
        background: rgba(255,255,255,0.4);
        position: absolute;
        top:50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -250px;

    }
    .loginLogo {
        width: 130px;
        height: 130px;
        background: rgba(255,255,255,0.4);
        border-radius: 50%;
        position: absolute;
        top: 0%;
        left: 50%;
        margin-left: -65px;
        margin-top: -65px;

    }
    .loginLogo img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .btns{
        display: flex;
        justify-content: center;
    }
    .login_form {
        position: absolute;
        bottom: 0px;
        width: 80%;
        margin:auto;
    }

</style>